<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <template #title >
        <l-breadcrumb :levelList.sync="levelList"  @change="handleBreadcrumbChange" ></l-breadcrumb>
      </template>
      <div>
        <div
          :class="[
            'learun-list-item folder-select-row',
            {'is-selected':row.id == selectedId}
          ]"
          v-for="(row,index) in tableData " 
          :key="index" 

          @click.stop="handleRowClick(row)"
          >
          <div class="learun-list-item-wraper" >
            <div class="learun-list-item-icon" >
              <i class="el-icon-folder" style="color: #fbbc06;" ></i>
            </div>
            <div class="learun-list-item-content" >
                <div class="learun-list-item-title" >
                  <el-button @click="handleOpenFolder(row)" size="mini" type="text">{{row.name}}</el-button>
                </div>
            </div>
            <div class="learun-list-item-icon" >
              <i class="el-icon-check icon-right" ></i>
            </div>
          </div>

        </div>
      </div>

    </l-panel>
  </l-layout>
</template>
<script>
const api = window.$api.system.file
export default {
  data() {
    return {
      levelList:[
        {
          name:this.$t('全部File '),
          id:'learun_folder_all'
        }
      ],
      tableData:[],
      selectedId:'learun_folder_all',
      entity:{}
    }
  },
  computed: {},
  methods: {
    handleBreadcrumbChange(row){
      this.selectedId = row.id
      this.$emit('select',row)
      this.loadTableData()
    },
    async init(entity){ // entity 需要移动的对象
      this.entity = entity
      this.selectedId = 'learun_folder_all'
      this.levelList = [
        {
          name:this.$t('全部File '),
          id:'learun_folder_all'
        }
      ]
      await this.loadTableData()
      
    },
    async loadTableData() {
      const queryData = {
        pid:this.levelList[this.levelList.length - 1].id,
        isLoadFile:0,
        order:'f_Name'
      }
      let data = []
      data = await this.$awaitWraper(api.getList(queryData))
      this.tableData = (data || []).filter(t=>t.id != this.entity.id)
    },
    handleOpenFolder(row){
      this.selectedId = row.id
      this.$emit('select',row)
      this.levelList.push({name:row.name,id:row.id})
      this.loadTableData()
    },

    handleRowClick(row){
      this.selectedId = row.id
      this.$emit('select',row)
    }
  }
};
</script>
<style lang="scss">
  .folder-select-row{
    .icon-right{
      font-size: 16px;
      color: #409EFF;
      display: none;
    }
  }

  .folder-select-row.is-selected{
    .icon-right{
      display: block;
    }
  }
</style>